<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				color="#9F9F9F"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
				@clickLeft="gaoback"
				@clickRight="showSetUp"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter">
					<text>{{ i18n.ctwfont19 }}</text>
				</view>
			</view>
			<view class="tishiTitle">
				<view class="">{{ i18n.ctwfont20 }}</view>
			</view>

			<!-- form表单 -->
			<uni-forms class="formBox" :v-model="formList" ref="form2" v-if="langShow" :rules="rules" validateTrigger="bind">
				<!-- 姓名 -->
				<uni-forms-item :label="i18n.ctwfont21" :labelWidth="100" name="realName" required class="formItemBox">
					<input
						type="text"
						:maxlength="20"
						class="classInput"
						v-model="formList.realName"
						:placeholder="i18n.ctwfont22"
						@input="binddata('realName', $event.detail.value)"
					/>
				</uni-forms-item>
				<!-- 性别 -->
				<uni-forms-item :label="i18n.ctwfont23" :labelWidth="100" required class="formItemBox">
					<radio-group @change="genderOnchange" class="genderBox">
						<label style="margin-right: 20px;" v-for="(item, index) in genderList" :key="item.value">
							<view>
								<radio :value="item.value" style="transform:scale(0.7)" :checked="index === formList.gender" />
								{{ item.text }}
							</view>
						</label>
					</radio-group>
				</uni-forms-item>
				<!-- 手机 -->
				<uni-forms-item :label="i18n.ctwfont26" :labelWidth="100" name="mobile" required class="formItemBox">
					<picker class="pickerBox" @change="bindPickerChange" :value="index" :range="array">
						<view class="pickerBoxImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" :src="arrayimg[index]"></image></view>
					</picker>
					<!-- style="padding-left: 38px;" -->
					<input
						style="padding-left: 38px;"
						type="number"
						:maxlength="11"
						class="classInput"
						v-model="formList.mobile"
						:placeholder="i18n.ctwfont10"
						@input="binddata('mobile', $event.detail.value)"
					/>
				</uni-forms-item>
				<!-- 邮箱 -->
				<uni-forms-item :label="i18n.ctwfont27" :labelWidth="100" name="email" class="formItemBox">
					<input type="text" class="classInput" v-model="formList.email" :placeholder="i18n.ctwfont28" @input="binddata('email', $event.detail.value)" />
					<!-- <uni-easyinput type="text" class="classInput" :inputBorder="false" v-model="formList.mailbox" placeholder="请输入邮箱"></uni-easyinput> -->
				</uni-forms-item>
				<!-- 身份证 -->
				<uni-forms-item :label="i18n.ctwfont29" :labelWidth="100" name="idCard" required class="formItemBox">
					<input
						type="text"
						class="classInput"
						:maxlength="20"
						v-model="formList.idCard"
						:placeholder="i18n.ctwfont30"
						@input="binddata('idCard', $event.detail.value)"
						@blur="idCardIsRegister"
					/>
					<!-- <uni-easyinput type="text" class="classInput" :inputBorder="false" v-model="formList.mailbox" placeholder="请输入邮箱"></uni-easyinput> -->
				</uni-forms-item>
				<!-- 收货地址 -->
				<uni-forms-item :label="i18n.ctwfont31" :labelWidth="100" name="receiveProvince" required class="formItemBox">
					<view class="dizhiBox">
						<uni-data-picker
							style="width: 100%;"
							:map="{ text: LanguageRegion, value: 'code' }"
							:localdata="receivingAddressList"
							:placeholder="i18n.ctwfont32 + i18n.ctwfont33"
							:popup-title="i18n.ctwfont31"
							@change="receivingAddressOnchange"
						></uni-data-picker>
						<!-- 						<uni-data-picker
							style="width: 100%; margin-left: 20px;"
							:localdata="receivingAddressList"
							:placeholder="i18n.ctwfont33"
							:popup-title="i18n.ctwfont31"
							@change="receivingAddressOnchange2"
						></uni-data-picker> -->
					</view>
				</uni-forms-item>
				<!-- 详细地址 -->
				<uni-forms-item label=" " style="margin: 0;" :labelWidth="100" name="receiveAddress" class="formItemBox">
					<!-- auto-height -->
					<uni-easyinput type="textarea" v-model="formList.receiveAddress" :placeholder="i18n.ctwfont34"></uni-easyinput>
				</uni-forms-item>
				<!-- 编码 -->
				<uni-forms-item label=" " style="margin: 0;" :labelWidth="100" class="formItemBox">
					<!-- auto-height -->
					<uni-easyinput type="number" style="margin: 20px 0; width: 120px;" v-model="formList.postCode" :placeholder="i18n.ctwfont35"></uni-easyinput>
				</uni-forms-item>
				<!-- 支付方式 -->
				<uni-forms-item :label="i18n.ctwfont91" :labelWidth="100" name="payFreightType" required class="formItemBox">
					<uni-data-picker :localdata="paymentColumns" :placeholder="i18n.ctwfont91" :popup-title="i18n.ctwfont36" @change="customerOnchange2"></uni-data-picker>
				</uni-forms-item>
				<!-- 企业类型 -->
				<uni-forms-item :label="i18n.ctwfont36" :labelWidth="100" name="customerType" required class="formItemBox">
					<uni-data-picker :localdata="customerList" :placeholder="i18n.ctwfont37" :popup-title="i18n.ctwfont36" @change="customerOnchange"></uni-data-picker>
				</uni-forms-item>
				<!-- 进口类型 -->
				<uni-forms-item :label="i18n.ctwfont42" :labelWidth="100" name="transportGoodsName" required class="formItemBox">
					<!-- 			<uni-data-picker
						ref="freight"
						:localdata="freightList"
						:placeholder="i18n.ctwfont37"
						v-model="formList.transportGoodsName"
						:popup-title="i18n.ctwfont42"
						@change="freightOnchange"
					></uni-data-picker> -->
					<!-- multiple -->
					<uni-data-checkbox multiple v-model="transportGoodsNameNew" :localdata="freightList" @change="freightOnchange"></uni-data-checkbox>
				</uni-forms-item>
				<!-- 认识渠道 -->
				<uni-forms-item :label="i18n.ctwfont47" :labelWidth="100" name="knowWayType" required class="formItemBox">
					<uni-data-picker :localdata="knowList" :placeholder="i18n.ctwfont37" :popup-title="i18n.ctwfont37" @change="knowOnchange"></uni-data-picker>
				</uni-forms-item>
				<!-- 推荐人代号 -->
				<uni-forms-item v-if="formList.knowWayType === 7" :label="i18n.ctwfont99" style="margin: 0;" :labelWidth="100" class="formItemBox">
					<uni-easyinput type="text" v-model="formList.recommendedCustomerMessage" :placeholder="i18n.ctwfont100"></uni-easyinput>
				</uni-forms-item>
				<view class="bottomBox" :style="{ marginTop: formList.knowWayType === 7 ? '10px' : 0 }">
					<view class=""></view>
					<view class="bottomBoxR">
						<view class="title1">
							<image
								@tap="checkboxChange"
								style="width: 12px; height: 12px; margin-right: 5px; vertical-align: middle;"
								mode="scaleToFill"
								:src="radioFw ? '/static/icon/OneDrive_5_11-16-2021/2x/ic_choice02@2x.png' : '/static/icon/OneDrive_5_11-16-2021/2x/ic_choice01@2x.png'"
							></image>
							<text>{{ i18n.ctwfont92 }}</text>
							<text style="color: #80B2FF" @tap="agreementOk">{{ i18n.ctwfont93 }}</text>

							<text>{{ i18n.ctwfont94 }}</text>
						</view>
					</view>
				</view>
				<view class="submitBtn">
					<view style="opacity: 0;">{{ i18n.ctwfont13 }}</view>
					<button size="mini" class="submitBtnR" @tap="FormSubmit" type="default">{{ i18n.ctwfont6 }}</button>
				</view>
			</uni-forms>
		</view>
		<!-- 协议弹框 -->
		<uni-drawer ref="showRight" :width="windowWidth" mode="right" :mask-click="false">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				@clickLeft="closeDrawer2"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#f1f1f1"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
			</uni-nav-bar>
			<scroll-view style="height: 89.6%;" scroll-y="true">
				<view style="overflow: scroll; padding: 0 20px;" v-html="agreementList.textWithoutPageBreak"></view>
				<button @tap="closeDrawer" type="default">Agree and close</button>
			</scroll-view>
		</uni-drawer>
		<!-- 注册成功 -->
		<uni-popup ref="loginPopupOk" type="center" :animation="false" :maskClick="false">
			<view class="loginBox" @tap="goHomeBtn">
				<view class="imgBox"><image style="width: 100px; height: 50px; border-radius: 10px;" mode="scaleToFill" src="/static/icon/outLogo.png"></image></view>
				<view class="titleBox2">{{ i18n.ctwfont57 }}</view>
				<view class="titleBox2">{{ i18n.ctwfont58 }}</view>
			</view>
		</uni-popup>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import LanguageConfig from '@/i18n/LanguageConfig';
import { setStorage, getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			windowWidth: 0, // 手机宽度
			formList: {
				realName: '', // 姓名
				mobile: '', // 手机号
				gender: 0, // 性别
				email: '', // 邮箱
				receiveProvince: '', // 收货省
				receiveCity: '', // 收货市
				receiveAddress: '', // 收货地址
				postCode: '', // 邮编
				knowWayType: '', // 得知方式
				customerType: '', // 客户类型
				payFreightType: '', // 支付方式
				transportGoodsName: '', // 商品名称
				idCard: '', // 身份证
				receiveCountry: '', // 国家
				recommendedCustomerMessage: '' // 客户代号
			},
			langShow: true, // 切换语言时校验更新
			transportGoodsNameNew: '', // 商品校验值
			agreementList: '', // 用户协议
			agreementShow: false, // 用户协议
			// 性别
			// 国籍arr
			arrayimg: ['/static/icon/china.png', '/static/icon/thailand.png', '/static/icon/vietnam.png'],
			radioFw: false,
			index: 0,
			goSetTime: null, // 自动跳转
			// 支付方式
			// 地址选择
			receivingAddressList: [],
			LanguageRegion: 'chineseName'
			// rules: {
			// 	// 验证姓名
			// 	realName: {
			// 		rules: [
			// 			{ required: true, errorMessage: this.$t('login').ctwfont106, trigger: 'blur' }
			// 			// { minLength: 2, maxLength: 20, errorMessage: '长度最大11个字符', trigger: 'blur' }
			// 		]
			// 	},
			// 	// 手机号
			// 	mobile: {
			// 		rules: [
			// 			{ required: true, errorMessage: this.$t('login').ctwfont104, trigger: 'blur' },
			// 			{
			// 				validateFunction: this.mobileValidateFunction
			// 			}
			// 			// { minLength: 9, maxLength: 11, errorMessage: '长度在 9 到 11 个字符', trigger: 'blur' }
			// 		]
			// 	},
			// 	// 身份证
			// 	idCard: {
			// 		rules: [
			// 			{ required: true, errorMessage: this.$t('login').ctwfont107, trigger: 'blur' },
			// 			{
			// 				validateFunction: this.idCardValidateFunction
			// 			}
			// 		]
			// 	},
			// 	// 邮箱
			// 	email: {
			// 		rules: [
			// 			{ required: true, errorMessage: this.$t('login').ctwfont108, trigger: 'blur' },
			// 			{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, errorMessage: '请输入正确的邮箱', trigger: 'blur' }
			// 		]
			// 	},
			// 	receiveAddress: {
			// 		rules: [{ required: true, errorMessage: this.$t('login').ctwfont109, trigger: 'blur' }]
			// 	},
			// 	// 省市
			// 	receiveProvince: {
			// 		rules: [{ required: true, errorMessage: this.$t('login').ctwfont110, trigger: 'blur' }]
			// 	},
			// 	// 商品名称
			// 	transportGoodsName: {
			// 		rules: [{ required: true, errorMessage: this.$t('login').ctwfont111, trigger: 'blur' }]
			// 	},
			// 	// 付款方式
			// 	payFreightType: {
			// 		rules: [{ required: true, errorMessage: this.$t('login').ctwfont112, trigger: 'blur' }]
			// 	},
			// 	// 客户类型
			// 	customerType: {
			// 		rules: [{ required: true, errorMessage: this.$t('login').ctwfont111, trigger: 'blur' }]
			// 	},
			// 	// 得知方式
			// 	knowWayType: {
			// 		rules: [{ required: true, errorMessage: this.$t('login').ctwfont113, trigger: 'blur' }]
			// 	}
			// }
		};
	},
	components: { setUpPages, signOut },
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowWidth = res.windowWidth;
				that.topBarHeight = res.statusBarHeight;
			}
		});
		this.getCityList();
	},
	mounted() {},
	onShow() {
		const languageFlag = getStorage('language') || 'th';
		if (languageFlag === 'zh') {
			this.index = 0;
			this.LanguageRegion = 'chineseName';
		} else if (languageFlag === 'th') {
			this.index = 1;
			this.LanguageRegion = 'thaiName';
		} else {
			this.index = 2;
			this.LanguageRegion = 'englishName';
		}
	},
	onHide() {},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 54; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('login');
		},
		array() {
			return [`${this.$t('login').ctwfont87}-86`, `${this.$t('login').ctwfont90}-66`, `${this.$t('login').ctwfont88}-84`];
		},
		genderList() {
			const arr = [
				{
					text: this.$t('login').ctwfont24,
					value: 0
				},
				{
					text: this.$t('login').ctwfont25,
					value: 1
				}
			];
			return arr;
		},
		freightList() {
			const arr2 = [
				{
					text: this.$t('login').ctwfont43,
					value: 0
				},
				{
					text: this.$t('login').ctwfont44,
					value: 1
				},
				{
					text: this.$t('login').ctwfont45,
					value: 2
				},
				{
					text: this.$t('login').ctwfont46,
					value: 3
				}
			];
			return arr2;
		},
		customerList() {
			const arr3 = [
				{
					text: this.$t('login').ctwfont38,
					value: 0
				},
				{
					text: this.$t('login').ctwfont39,
					value: 1
				},
				{
					text: this.$t('login').ctwfont40,
					value: 2
				},
				{
					text: this.$t('login').ctwfont41,
					value: 3
				}
			];
			return arr3;
		},
		knowList() {
			const arr4 = [
				{
					text: this.$t('login').ctwfont48,
					value: 0
				},
				{
					text: this.$t('login').ctwfont49,
					value: 1
				},
				{
					text: this.$t('login').ctwfont50,
					value: 2
				},
				{
					text: this.$t('login').ctwfont51,
					value: 3
				},
				{
					text: this.$t('login').ctwfont52,
					value: 4
				},
				{
					text: this.$t('login').ctwfont53,
					value: 5
				},
				{
					text: this.$t('login').ctwfont54,
					value: 6
				},
				{
					text: this.$t('login').ctwfont55,
					value: 7
				},
				{
					text: this.$t('login').ctwfont95,
					value: 8
				}
			];
			return arr4;
		},
		// 支付方式
		paymentColumns() {
			return [
				{
					text: this.$t('login').ctwfont96,
					value: 0
				},
				{
					text: this.$t('login').ctwfont97,
					value: 1
				}
			];
		},
		rules() {
			return {
				// 验证姓名
				realName: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont106, trigger: 'blur' }
						// { minLength: 2, maxLength: 20, errorMessage: '长度最大11个字符', trigger: 'blur' }
					]
				},
				// 手机号
				mobile: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont104, trigger: 'blur' },
						{
							validateFunction: this.mobileValidateFunction
						}
						// { minLength: 9, maxLength: 11, errorMessage: '长度在 9 到 11 个字符', trigger: 'blur' }
					]
				},
				// 身份证
				idCard: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont107, trigger: 'blur' },
						{
							validateFunction: this.idCardValidateFunction
						}
					]
				},
				// 邮箱
				email: {
					rules: [
						{ required: false, errorMessage: this.$t('login').ctwfont108, trigger: 'blur' },
						{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, errorMessage: this.$t('login').ctwfont108, trigger: 'blur' }
					]
				},
				receiveAddress: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont109, trigger: 'blur' }]
				},
				// 省市
				receiveProvince: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont110, trigger: 'blur' }]
				},
				// 商品名称
				transportGoodsName: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont111, trigger: 'blur' }]
				},
				// 付款方式
				payFreightType: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont112, trigger: 'blur' }]
				},
				// 客户类型
				customerType: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont111, trigger: 'blur' }]
				},
				// 得知方式
				knowWayType: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont113, trigger: 'blur' }]
				}
			};
		}
	},
	methods: {
		// 回退
		gaoback() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/logins/phone`
			});
			// #endif2
			// #ifdef H5
			this.$Router.push(`/pages/logins/phone`);
			// #endif
		},
		goBackBox() {
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				if (this.agreementShow) {
					this.agreementShow = false;
					this.$refs.showRight.close();
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: `/pages/logins/phone`
					});
					// #endif
					// #ifdef H5
					this.$Router.push(`/pages/logins/phone`);
					// #endif
				}
			}
		},
		// 手机校验
		async mobileValidateFunction(rule, value, data, callback) {
			if (this.index === 0) {
				var re = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
				if (re.test(value)) {
					const res = await this.isRegister(value);
					// return true;
				} else {
					callback(this.$t('login').ctwfont114);
				}
			} else if (this.index === 1) {
				return true;
			} else {
				return true;
			}
		},
		// 身份证校验
		async idCardValidateFunction(rule, value, data, callback) {
			if (value.length === 4) {
				const res = await this.idCardIsRegister(value);
			}
		},
		// 性别
		genderOnchange(e) {
			this.formList.gender = e.detail.value;
		},
		// // 运费方式
		freightOnchange(e) {
			if (e.detail.value.length > 0) {
				this.formList.transportGoodsName = JSON.stringify(e.detail.value);
			} else {
				this.formList.transportGoodsName = '';
			}
		},
		// 付款方式
		customerOnchange2(e) {
			if (e.detail.value.length > 0) {
				this.formList.payFreightType = e.detail.value[0].value;
			} else {
				this.formList.payFreightType = '';
			}
		},
		// 客户类型
		customerOnchange(e) {
			if (e.detail.value.length > 0) {
				this.formList.customerType = e.detail.value[0].value;
			} else {
				this.formList.customerType = '';
			}
		},
		// 收货地址
		receivingAddressOnchange(e) {
			// this.formList.receiveCity
			if (e.detail.value[0]) {
				this.formList.receiveCountry = e.detail.value[0].value;
				this.formList.receiveProvince = e.detail.value[1].value;
				this.formList.receiveCity = e.detail.value[2].value;
			}
		},
		receivingAddressOnchange2(e) {
			if (e.detail.value.length > 0) {
				this.formList.receiveCity = e.detail.value[0].value;
			} else {
				this.formList.receiveCity = '';
			}
		},
		// 知道方法
		knowOnchange(e) {
			if (e.detail.value.length > 0) {
				this.formList.knowWayType = e.detail.value[0].value;
			} else {
				this.formList.knowWayType = '';
			}
		},
		// 手机是否注册
		isRegister(e) {
			return new Promise(async (resolve, reject) => {
				let areaCode = '';
				if (this.index === 0) {
					areaCode = '86';
				} else if (this.index === 1) {
					areaCode = '66';
				} else {
					areaCode = '84';
				}
				const params = {
					areaCode: areaCode,
					mobile: e
				};
				const { data: res } = await this.$http(true, 'api/user/mobile/isRegister', params, 'GET');
				if (res.errno === 0) {
					resolve(true);
				} else {
					reject(new Error(res.errmsg));
				}
			});
		},
		// 身份证是否注册
		async idCardIsRegister(e) {
			return new Promise(async (resolve, reject) => {
				const params = {
					idCard: e
				};
				const { data: res } = await this.$http(true, 'api/user/isRegister', params, 'GET');
				if (res.errno === 0) {
					resolve(true);
				} else {
					reject(new Error(res.errmsg));
				}
			});
		},
		// 选择国籍
		bindPickerChange(val) {
			this.langShow = false;
			let lang = 'zh';
			this.index = val.target.value;
			if (this.index === 0) {
				lang = 'zh';
				this.LanguageRegion = 'chineseName';
			} else if (this.index === 1) {
				lang = 'th';
				this.LanguageRegion = 'thaiName';
			} else {
				lang = 'en';
				this.LanguageRegion = 'englishName';
			}
			LanguageConfig.isExist(lang);
			this.$i18n.locale = lang;
			setStorage('language', lang);
			this.$refs.form2.resetFields();
			this.$nextTick(function() {
				this.langShow = true;
				this.erificationOptimization()
			});
		},
		// 切换后校验优化
		erificationOptimization() {
			setTimeout(() => {
				this.formList.realName ? this.$refs.form2.setValue('realName', this.formList.realName) : '';
				this.formList.mobile ? this.$refs.form2.setValue('mobile', this.formList.mobile) : '';
				this.formList.email ? this.$refs.form2.setValue('email', this.formList.email) : '';
				this.formList.receiveProvince ? this.$refs.form2.setValue('receiveProvince', this.formList.receiveProvince) : '';
				this.formList.receiveAddress ? this.$refs.form2.setValue('receiveAddress', this.formList.receiveAddress) : '';
				this.formList.knowWayType ? this.$refs.form2.setValue('knowWayType', this.formList.knowWayType) : '';
				this.formList.customerType ? this.$refs.form2.setValue('customerType', this.formList.customerType) : '';
				this.formList.payFreightType ? this.$refs.form2.setValue('payFreightType', this.formList.payFreightType) : '';
				this.formList.transportGoodsName ? this.$refs.form2.setValue('transportGoodsName', this.formList.transportGoodsName) : '';
				this.formList.idCard ? this.$refs.form2.setValue('idCard', this.formList.idCard) : '';
			}, 200);
		},
		// 同意协议
		checkboxChange() {
			this.radioFw = !this.radioFw;
		},
		// 协议弹框
		async agreementOk() {
			const lang = getStorage('language') || 'th';
			let text = '';
			if (lang === 'zh') {
				text = 'Terms_of_new_account_register_chinese';
			} else if (lang === 'en') {
				text = 'Terms_of_new_account_register_english';
			} else {
				text = 'Terms_of_new_account_register_thai';
			}
			const params = {
				number: text,
				isPage: '1',
				limit: '4',
				page: '1',
				isShowDetail: '1'
			};
			const { data: res } = await this.$http(true, 'api/info/infoList', params, 'GET');
			if (res.errno === 0) {
				this.agreementShow = true;
				this.$refs.showRight.open();
				this.agreementList = res.data.list[0];
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 关闭协议弹框
		closeDrawer() {
			this.radioFw = true;
			this.agreementShow = false;
			this.$refs.showRight.close();
		},
		// 关闭协议弹框
		closeDrawer2() {
			this.agreementShow = false;
			this.$refs.showRight.close();
		},
		async getCityList() {
			const { data: res } = await this.$http(true, 'address_codes', '', 'GET');
			if (res.errno === 0) {
				const arr = [];
				const city1 = JSON.stringify(res.data);
				const city2 = city1.replace(/childrenMap/g, 'children');
				const city3 = JSON.parse(city2);
				for (var k in city3) {
					arr.push(city3[k]);
				}
				this.receivingAddressList = this.recursiveTransform(arr);
				// const arr = [];
				// const city1 = JSON.stringify(res.data['0066']);
				// console.log(city1)
				// const city2 = city1.replace(/childrenMap/g, 'children');
				// const city3 = JSON.parse(city2);
				// for (var k in city3.children) {
				// 	arr.push(city3.children[k]);
				// }
				// this.receivingAddressList = this.recursiveTransform(arr);
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},

		recursiveTransform(inputObj) {
			const newArr = Object.values(inputObj);
			newArr.forEach(obj => {
				// if (obj.data) obj.data = recursiveTransform(obj.data);
				if (obj.children) obj.children = this.recursiveTransform(obj.children);
			});
			return newArr;
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			this.langShow = false;
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			const languageFlag = getStorage('language') || 'th';
			if (languageFlag === 'zh') {
				this.index = 0;
				this.LanguageRegion = 'chineseName';
			} else if (languageFlag === 'th') {
				this.index = 1;
				this.LanguageRegion = 'thaiName';
			} else {
				this.index = 2;
				this.LanguageRegion = 'englishName';
			}
			this.$refs.form2.resetFields();
			this.$nextTick(function() {
				this.langShow = true;
				this.erificationOptimization()
			});
		},
		// 提交
		FormSubmit() {
			this.$refs.form2
				.submit()
				.then(async val => {
					if (!this.radioFw) {
						return uni.showToast({
							title: this.$t('login').ctwfont115,
							icon: 'none',
							position: 'top'
						});
					} else {
						const {
							realName,
							mobile,
							gender,
							email,
							receiveProvince,
							receiveCity,
							receiveAddress,
							postCode,
							knowWayType,
							customerType,
							payFreightType,
							transportGoodsName,
							idCard,
							receiveCountry,
							recommendedCustomerMessage
						} = this.formList;
						let areaCode = '';
						// let receiveCountry = '0066';
						if (this.index === 0) {
							areaCode = '86';
							// receiveCountry = '中国';
						} else if (this.index === 1) {
							areaCode = '66';
							// receiveCountry = '泰国';
						} else {
							areaCode = '84';
							// receiveCountry = '越南';
						}
						const params2 = {
							realName,
							mobile,
							gender: gender === 0 ? 'M' : 'F',
							email,
							receiveProvince,
							receiveCity,
							receiveAddress,
							postCode,
							knowWayType,
							customerType,
							payFreightType,
							transportGoodsName,
							idCard,
							areaCode,
							receiveCountry,
							recommendedCustomerMessage
						};
						const { data: res } = await this.$http(true, 'api/user/register', params2, 'POST');
						if (res.errno === 0) {
							this.$refs.loginPopupOk.open();
							this.goSetTime = setTimeout(() => {
								this.$refs.loginPopupOk.close();
								// #ifdef APP-PLUS
								uni.redirectTo({
									url: '/pages/home/index'
								});
								// #endif
								// #ifdef H5
								this.$Router.push('/pages/home/index');
								// #endif
							}, 2000);
						} else {
							const arr = Object.values(res.data);
							// arr.forEach(item => {
							// 	if (typeof item === 'string') {
							// 		uni.showToast({
							// 			title: item,
							// 			icon: 'none',
							// 			position: 'top'
							// 		});
							// 	}
							// });
							const errnoNum = arr.filter(item => typeof item === 'number');
							const err = codeMapFun().find(item => item[errnoNum[0]]);
							if (err) {
								uni.showToast({
									title: err[errnoNum[0]],
									icon: 'none',
									position: 'top'
								});
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none',
									position: 'top'
								});
							}
						}
					}
				})
				.catch(err => {
					uni.showToast({
						title: 'Please fill in the correct information',
						icon: 'none',
						position: 'top'
					});
				});
		},
		// 登录成功回到首页
		goHomeBtn() {
			// 关闭自动跳转
			clearTimeout(this.goSetTime);
			this.$refs.loginPopupOk.close();
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
// 多行文本
::v-deep .uni-easyinput__content-textarea {
	min-height: 50px;
	height: 50px;
}
// formItem
::v-deep .uni-forms-item {
	margin-bottom: 20px;
}
::v-deep .uni-forms-item__label {
	height: 25px;
}
::v-deep .uni-forms-item__content {
	min-height: 25px;
}
::v-deep .uni-forms-item__label {
	font-size: $uni-font-size-custom-b;
}
::v-deep .uni-easyinput__content {
	min-height: 25px;
}
::v-deep .input-value {
	line-height: 25px;
	font-size: $uni-font-size-custom-b;
}
::v-deep .uni-easyinput__content-input {
	font-size: $uni-font-size-custom-b;
}
::v-deep .uni-easyinput__content-textarea {
	font-size: $uni-font-size-custom-b;
}
::v-deep uni-checkbox .uni-checkbox-input {
	border-radius: 50%;
}
::v-deep .uni-error-message {
	width: 80%;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
// 顶部部分
.status_bar {
	height: var(--status-bar-height);
	background-color: #f1f1f1;
	width: 100%;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.loginBox {
	width: 700rpx;
	height: 150px;
	border-radius: 10px;
	background-color: #CD001B;
	.imgBox {
		display: flex;
		justify-content: center;
		padding: 20px 20px 15px 20px;
	}
	.titleBox2 {
		text-align: center;
		font-size: $uni-font-size-custom-d;
		color: #ebedf3;
	}
}
.zhuti {
	// 收货地址
	.dizhiBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.swiper-box {
		margin: 0 20px;
		height: 80px;
		border-radius: 10px;
		overflow: hidden;
		background-color: #ccc;
		.swiper-item {
			text-align: center;
		}
	}
	.titleBox {
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			width: 90%;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			background-color: #f2f2f2;
			font-size: $uni-font-size-custom-d;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1; // 多行在这里修改数字即可
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
	.tishiTitle {
		width: 85%;
		margin: auto;
		text-align: center;
		font-size: $uni-font-size-custom-d;
		line-height: 16px;
		color: #7a7b84;
		margin-bottom: 10px;
	}
	.formBox {
		// position: absolute;
		// top: 80px;
		// width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
		margin-top: 5px;
		.genderBox {
			display: flex;
		}
		.formItemBox {
			.classInput {
				position: relative;
				height: 25px;
				// color: #9e9fa0;
				border: 1px solid #e7e7e7;
				border-radius: 5px;
				padding: 0 5px;
				font-size: $uni-font-size-custom-b;
			}
			.pickerBox {
				position: absolute;
				z-index: 10;
				left: 110px;
				// left: 70px;
				.pickerBoxImg {
					width: 30px;
					height: 28px;
				}
			}
		}
		.submitBtn {
			padding: 10px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.submitBtnR {
				background-color: #CD001B;
				padding: 0 20px;
				border-radius: 5px;
				color: #ffffff;
				line-height: 2;
				margin: 0;
			}
		}
		.bottomBox {
			display: flex;
			justify-content: space-between;
			font-size: $uni-font-size-custom-b;
			.bottomBoxR {
				display: flex;
				justify-content: flex-end;
				width: 250px;
				.title1 {
					text-align: right;
					// width: 200px;
				}
			}
		}
	}
}
</style>
